<template>
    <el-card shadow="never">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item,index) in options" :key="index"
                                  :checked="current === item.value" style="margin-right: 8px;"
                                  @click="handleChose(item.value)">{{ item.text }}</el-check-tag>
                </div>
            </div>
        </template>
        <div ref="el" id="chart" style="width: 100%; height: 300px;"></div>
    </el-card>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from 'echarts';
import { useResizeObserver } from "@vueuse/core";
import { 
    getStatistics3
} from "../api/index.js";

const current = ref("week"); 
const options = [
    {
        text: "近一月",
        value: "month"
    },
    {
        text: "近一周",
        value: "week"
    },
    {
        text: "近24小时",
        value: "hour"
    },
];

const handleChose = (type) => {
    current.value = type;
    getData()
};

var myChart = null;

onMounted(() => {
    const chartDom = document.getElementById('chart');
    if(chartDom){
        myChart = echarts.init(chartDom);
        // 将 el 关联到实际的 DOM 元素
        const elValue = chartDom;
        el.value = elValue;
        getData();
        // 在 myChart 初始化完成后再调用 useResizeObserver
        useResizeObserver(el, (entries) => {
            if (myChart) {
                myChart.resize();
            }
        });
    }
})

onBeforeUnmount(()=>{
    if(myChart) echarts.dispose(myChart)
})

function getData() {
    let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true, 
                backgroundStyle: { 
                    color: 'rgba(180,180,180,0.2)'
                }
            }
        ]
    };
    myChart.showLoading()
    getStatistics3(current.value).then(res=>{
        option.xAxis.data=res.x
        option.series[0].data=res.y
        myChart.setOption(option)
    }).finally(()=>{
        myChart.hideLoading()
    })
}

const el = ref(null);
</script>
<style>
</style>